﻿@namespace Blazorise.Docs.Docs.Examples

<Div Flex="Flex.JustifyContent.Start" Margin="Margin.Is3.FromBottom" Style="@flexContainerStyle">
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 1
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 2
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 3
    </Div>
</Div>
<Div Flex="Flex.JustifyContent.End" Margin="Margin.Is3.FromBottom" Style="@flexContainerStyle">
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 1
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 2
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 3
    </Div>
</Div>
<Div Flex="Flex.JustifyContent.Center" Margin="Margin.Is3.FromBottom" Style="@flexContainerStyle">
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 1
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 2
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 3
    </Div>
</Div>
<Div Flex="Flex.JustifyContent.Between" Margin="Margin.Is3.FromBottom" Style="@flexContainerStyle">
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 1
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 2
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 3
    </Div>
</Div>
<Div Flex="Flex.JustifyContent.Around" Margin="Margin.Is3.FromBottom" Style="@flexContainerStyle">
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 1
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 2
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 3
    </Div>
</Div>
@code {
    const string ContainerBackgroundColor = "rgba(165, 181, 167,.15)";
    const string ContainerBorderColor = "rgba(165, 181, 167,.15)";

    const string ItemBackgroundColor = "rgba(95, 163, 103,.15)";
    const string ItemBorderColor = "rgba(95, 163, 103,.15)";

    string flexContainerStyle = $"background-color: {ContainerBackgroundColor};border: 1px solid {ContainerBorderColor};";
    string alignItemsFlexContainerStyle = $"background-color: {ContainerBackgroundColor};border: 1px solid {ContainerBorderColor};height: 100px;";

    string flexItemStyle = $"background-color: {ItemBackgroundColor}; border: 1px solid {ItemBorderColor};";
}